<template>
    <div class="addFactory">
        <el-page-header @back="goBack" content="修改预约信息"></el-page-header>
        <br>
        <el-form ref="form" :model="form" label-width="120px">
            <!-- <div class="form-addFactory"> -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>贵宾信息</span>
                    </div>

                    <el-form-item label="楼盘名称：">
                        <el-input placeholder="请输入楼盘名称" v-model="form.houseName"></el-input>
                    </el-form-item>
                    <el-form-item label="电话：">
                        <el-input placeholder="请输入电话" v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="微信号：">
                        <el-input placeholder="请输入微信号" v-model="form.wx"></el-input>
                    </el-form-item>
                    <el-form-item label="送货地址：">
                        <el-input placeholder="请输入送货地址" v-model="form.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="航班号：">
                        <el-input placeholder="请输入航班号" v-model="form.flightNum"></el-input>
                    </el-form-item>
                    <el-form-item label="到达地点：">
                        <el-input placeholder="请输入到达地点" v-model="form.arriveAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="到达时间：">
                        <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="form.arriveDate"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="同行人数：">
                        <el-input-number v-model="form.peopleCount" @change="handleChange" :min="1" :max="1000" label="同行人数"></el-input-number>
                    </el-form-item>

                </el-card>

                <el-card class="box-card mt_20">
                    <div slot="header" class="clearfix">
                        <span>接待经理</span>
                    </div>

                    <el-form-item label="姓名：">
                        <el-input placeholder="请输入接待经理姓名" v-model="form.managerName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：">
                        <el-select v-model="form.managerSex" placeholder="请选择接待经理性别">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电话：">
                        <el-input placeholder="请输入接待经理电话" v-model="form.managerMobile"></el-input>
                    </el-form-item>
                    <el-form-item label="微信号：">
                        <el-input placeholder="请输入接待经理微信号" v-model="form.managerWx"></el-input>
                    </el-form-item>
                </el-card>

                <el-card class="box-card mt_20 mb_20">
                    <div slot="header" class="clearfix">
                        <span>接送司机</span>
                    </div>

                    <el-form-item label="姓名：">
                        <el-input placeholder="请输入接送司机姓名" v-model="form.driverName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：">
                        <el-select v-model="form.driveSex" placeholder="请选择接送司机性别">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电话：">
                        <el-input placeholder="请输入接送司机电话" v-model="form.driverMobile"></el-input>
                    </el-form-item>
                    <el-form-item label="微信号：">
                        <el-input placeholder="请输入接送司机微信号" v-model="form.driverWx"></el-input>
                    </el-form-item>
                </el-card>

            <el-form-item label="预约记录状态：">
                <el-select v-model="form.status" placeholder="请选择接送司机性别">
                    <el-option label="客户经理已联系" value="客户经理已联系"></el-option>
                    <el-option label="已预约到访时间" value="已预约到访时间"></el-option>
                    <el-option label="客户已到访" value="客户已到访"></el-option>
                    <el-option label="订单已报价" value="订单已报价"></el-option>
                    <el-option label="已交付定金" value="已交付定金"></el-option>
                    <el-option label="配送途中" value="配送途中"></el-option>
                    <el-option label="已交付使用" value="已交付使用"></el-option>
                    <el-option label="已回访" value="已回访"></el-option>
                </el-select>
            </el-form-item>

            <!-- </div> -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">更新</el-button>
                <el-button @click="goBack">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {formatDate} from '@/assets/js/utils.js'
    export default {
        name: 'addFactory',
        data() {
            return {
                form: {
                    status:'客户经理已联系',

                    mobile: '',
                    wx: '',
                    houseName: '',
                    address: '',
                    flightNum: '',
                    arriveDate: '',
                    arriveAddress: '',
                    peopleCount: '',

                    driverName:'',
                    driverMobile:'',
                    driveSex:'',
                    driverWx:'',

                    managerName:'',
                    managerMobile:'',
                    managerSex:'',
                    managerWx:'',

                }
            }
        },
        created () {
            this.updateRecord();
        },
        methods: {
            updateRecord(){
                let query = this.$route.query;
                let param = {
                    mobile: query.mobile
                };
                this.$api.furnitureList({param},res=>{
                    console.log('res', res);
                    let list = res.list;
                    list.map(e=>{
                        e.arriveDate = formatDate('yyyy-MM-dd HH:mm:ss', new Date(e.arriveDate));
                        e.arriveDate = formatDate('yyyy-MM-dd HH:mm:ss', new Date(e.created));
                        return e;
                    })
                    
                    this.form = {...this.form,...list[0]};
                });
            },
             handleChange(value) {
                console.log(value);
            },
            onSubmit() {
                console.log('submit!');
                let param = this.form;
                this.form.arriveDate = formatDate('yyyy-MM-dd HH:mm:ss', new Date(this.form.arriveDate))
                this.$api.updateRecord({param,method:'post'},res=>{
                    console.log('addRecord',res);
                    this.$router.push('/factoryList');
                })
            },
            goBack(){
                this.$router.push('/factoryList')
            }
        },
    }
</script>

<style lang="less" scoped>
    .addFactory{
        .form-addFactory{
            // display: flex;
            // flex-wrap: wrap;
            .box-card{
                width: 500px;
                margin-right: 15px;
                // display: inline-block;
                float: left;
            }
        }
    }
</style>